<template>
    <div>
        <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm page-form">

            <el-row>
                

                <el-col :span="8">
                    <el-form-item label="入库编号" prop="Number">
                        <el-input v-model="model.Number" placeholder="请输入编号"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="状态" prop="Status">
                        <el-select v-model="model.Status" placeholder="请选择当前入库状态">
                            <el-option label="待入库" value="0"></el-option>
                            <el-option label="已入库" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="供应商" prop="VendorName">
                        <el-select v-model="model.VendorName" placeholder="请选择供应商" @change="vendorChange">
                            <el-option v-for="item in VendorList" :key="item.Id" :label="item.VendorName"
                                :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>

                <el-col :span="8">
                    <el-form-item label="入货仓" prop="WarehouseName">
                        <el-select v-model="model.WarehouseName" placeholder="请选择仓库"  @change="wareHouseChange">
                            <el-option v-for="item in WarehouseList" :key="item.Id" :label="item.WarehouseName" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="入库日期" prop="DeliveryDate">
                        <el-date-picker type="date" placeholder="选择入库日期" v-model="model.DeliveryDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark"></el-input>
                    </el-form-item>
                </el-col>


            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="付款方式" prop="PaymentCategory">
                        <el-select v-model="model.PaymentCategory" placeholder="请选择付款方式">
                            <el-option label="微信支付" value="微信支付"></el-option>
                            <el-option label="支付宝" value="支付宝"></el-option>
                            <el-option label="现金支付" value="现金支付"></el-option>
                            <el-option label="银行卡支付" value="银行卡支付"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="联系人" prop="VendorContact">
                        <el-input v-model="model.VendorContact" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="联系人电话" prop="VendorContactTel">
                        <el-input v-model="model.VendorContactTel" placeholder="联系人电话"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            


            <el-row>
                <el-col :span="8">
                    <el-form-item label="付款账户" prop="PaymentAccount">
                        <el-select v-model="model.PaymentAccount" placeholder="请选择付款方式">
                            <el-option label="工商银行0712" value="工商银行0712"></el-option>
                            <el-option label="现金账" value="现金账"></el-option>
                            <el-option label="微信12345678901" value="微信12345678901"></el-option>
                            <el-option label="招商银行" value="招商银行"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>


                <el-col :span="8">
                    <el-form-item label="付款日期" prop="PaymentTime">
                        <el-date-picker type="date" placeholder="选择付款日期" v-model="model.PaymentTime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>

            

            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="addBom" size="small">新增</el-button>
                <el-button  type="danger" plain icon="el-icon-delete" size="small" @click="delBom">删除</el-button>
            </div>

            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360" >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column  prop="ItemCode" label="编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemName" label="名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Price" label="单价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CurrCount" label="当前库存" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Amount" label="金额" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column prop="Count" label="数量" :show-overflow-tooltip="true">
                     <template slot-scope="scope">
                        <el-input v-model="scope.row.Count" @change="handleChange(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.Remark" />
                    </template>
                </el-table-column>

                <el-table-column label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <div style="text-align:right; margin: 10px;">
                <el-button @click="checkedOrderPo">选择采购单</el-button>
                <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
                <el-button @click="resetForm">重置</el-button>
            </div>


            <!-- 弹窗 -->
            <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title"
                :visible.sync="dialogDomain.dialogVisible" width="60%" >
                <SelectedItemFourStock @callback="SelectedItemFourStockCallback"  :ItemList="tableData" :WareHouseId="this.model.WarehouseId.toString()"
                    v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 0" />
                <SelectedOrderPo @callback="SelectedOrderPoCallBack" v-else-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 1" />
            </el-dialog>

        </el-form>
    </div>
</template>


<script>
import SelectedItemFourStock from '@/views/Product/ProductView/components/SelectedItemFourStock.vue'
import SelectedOrderPo from './SelectedOrderPo.vue'

export default{
    components:{
        SelectedItemFourStock,
        SelectedOrderPo
    },
    props:{
        model:{
            require: true,
            type: Object,
        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data(){
        return{
            //仓库模型数据
            WarehouseList: [],

            //检测项目数据
            tableData: [],

            //供应商数据
            VendorList: [],


            isLoading: false,

            //对话框对象
            dialogDomain: {
                title: '物料产品选择',
                dialogVisible: false,
                dialogType: 0  //0物料产品  1单据
            },

            
            //非空判断
            rules: {
                Number: { required: true, message: '请输 入库编号', trigger: 'blur' },
                Status: { required: true, message: '请选择退入库状态' },
                WarehouseName: { required: true, message: '请选择仓库' },

                DeliveryDate: { required: true, message: '请选择入库日期' },
                PaymentCategory:{ required: true, message: '请选择付款方式' },
                PaymentAccount:{ required: true, message: '请选择付款账户' },

                VendorContact:{ required: true, message: '请输入联系人' },
                VendorContactTel:{ required: true, message: '请输入联系人电话' },
                PaymentTime:{ required: true, message: '请选择付款日期' },


            }

        }
    },
    //实例生命周期
    created(){

        //获取仓库数据调用方法
        this.getWarehouseData();

        //获取供应商数据调用方法
        this.getProductSelectData();

        if(this.isUpdate){
            this.GetWhPoInboundItemById()
        }
    },
    methods:{
        //选择仓库时为其添加仓库名和Id
        wareHouseChange(model){
            this.model.WarehouseId=model.Id;
            this.model.WarehouseName=model.WarehouseName;
        },
        //选择仓库时为其添加仓库名和Id
        vendorChange(model){
            this.model.VendorId=model.Id;
            this.model.VendorName=model.VendorName;
        },

        checkedOrderPo(){
            this.dialogDomain.title = "选择采购单";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 1;
        },
        SelectedOrderPoCallBack(model,list){
            this.dialogDomain.dialogVisible = false;

            
            this.model.OrderPoId = model.Id;
            this.model.VendorId = model.VendorId;
            this.model.VendorName = model.VendorName;
            this.model.VendorContact = model.VendorContact;
            this.model.VendorContactTel = model.VendorContactTel;
            this.model.PaymentCategory = model.PaymentCategory;
            this.model.PaymentAccount = model.PaymentAccount;
            this.model.PaymentTime = model.PaymentTime;
            this.model.WarehouseId = model.WarehouseId;
            this.model.WarehouseName = model.WarehouseName;
            this.model.DeliveryDate = model.DeliveryDate;
            this.model.Remark = model.Remark;


            //处理子项
            list.map(x => { 
                var obj = new Object();
                //处理所需字段
                this.$set(obj, 'ItemId', x.ItemId);
                this.$set(obj, 'ItemCode', x.ItemCode);
                this.$set(obj, 'ItemName', x.ItemName);
                this.$set(obj, 'CurrCount', x.CurrCount);
                this.$set(obj, 'Price', x.TaxPrice);
                this.$set(obj, 'Spec', x.Spec);
                this.$set(obj, 'UnitOfMeasure', x.UnitOfMeasure);

                this.$set(obj, 'Count', x.Count);
                this.$set(obj, 'Amount', x.TaxAmount);
                this.$set(obj, 'Remark', x.Remark);
                this.tableData.push(obj);
            })
        },

        

        //根据生产退料Id 返回产品数据
        GetWhPoInboundItemById() {
            this.isLoading=true;
            this.$http.get('/api/WhPoInbound/GetWhPoInboundItemById',{
                params:{
                    WhPoInboundId:this.model.Id,
                    WarehouseId:this.model.WarehouseId
                }
            })
            .then(res => {
                this.isLoading=false;
                this.tableData = res.Data;
            })
        },
        
        //添加检测项目
        addBom() {
            if(this.model.WarehouseId==""){
                this.showNotify('请选择仓库');
                return;
            }
            this.dialogDomain.title = "选择物料产品";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 0;
        },
        delBom(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请选择一项');
                return;
            }

            this.$refs.dataForm.selection.forEach(row => {
                const index = this.tableData.indexOf(row);
                this.tableData.splice(index, 1);
            });
        },

        //删除产品BOM组成
        del(model) {
            let index = this.tableData.indexOf(model);
            this.tableData.splice(index,1);
        },

        //创建 跟 保存
        submitForm(){
            this.$refs['ruleForm'].validate((valid)=>{
                if(valid){
                    if(this.isUpdate){
                        this.put();
                    }
                    else{
                        this.add();
                    }
                }
                else{                    
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        //重置
        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },

        //新增
        add() {
            console.log(this.model)
            this.$http.postForm('/api/WhPoInbound', { model: this.model,WhPoInboundItemString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
            .then(res => {
                this.$emit('callback');
            })

        },

        //修改
        put() {
            console.log(this.tableData);
            this.$http.putForm('/api/WhPoInbound', { model: this.model,WhPoInboundItemString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
            .then((res) => {
                this.$emit('callback');
            })
        },
        //获取仓库数据
        getWarehouseData() {
            this.$http.get('/api/Warehouse/GetAll')
            .then(res => {
                this.WarehouseList=res.Data;
            })
        },

        //获取供应商
        getProductSelectData() {
            this.$http.get('/api/Integrated/getProductSelectData')
                .then(res => {
                this.ModelList = res.Data.ModelList;
                this.SpecList = res.Data.SpecList;
                this.UnitMeasureList = res.Data.UnitMeasureList;
                this.VendorList = res.Data.VendorList;
            })
        },


        //选择检测项目回调
        SelectedItemFourStockCallback(){
            
            this.dialogDomain.dialogVisible = false;
            let arr = [];
            this.tableData.map(x => { 
                var obj = new Object();
                //处理所需字段
                this.$set(obj, 'ItemId', x.ItemId);
                this.$set(obj, 'ItemCode', x.ItemCode);
                this.$set(obj, 'ItemName', x.ItemName);
                this.$set(obj, 'CurrCount', x.CurrCount);
                this.$set(obj, 'Price', x.PurchasePrice);
                this.$set(obj, 'Spec', x.Spec);
                this.$set(obj, 'UnitOfMeasure', x.UnitOfMeasure);

                this.$set(obj, 'Count', 1);
                this.$set(obj, 'Amount', x.PurchasePrice);
                this.$set(obj, 'Remark', '');
                arr.push(obj);
            })

            this.tableData = arr;




        },
        
        handleChange(row) {
            row.Amount = row.Price * row.Count;
        },

    }

}

</script>

<style>

</style>